<template>
  <div class="goods-details-container">
    <!-- 面包屑 -->
    <div style="width: auto;height: 60px;font-size: larger;">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">仪表台</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Inventory' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item>货品详细内容</el-breadcrumb-item>
  </el-breadcrumb>
    </div>
    <!-- 头部信息 -->
    <div class="header-section">
      <div class="product-title">
        <span class="product-name">{{ goodsInfo.goodsname }}</span>
        <span class="product-id">{{ goodsInfo.goodscoding }}</span>
        <el-button type="text" icon="el-icon-edit" class="edit-btn"></el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧图片画廊 -->
      <div class="left-panel">
        <div class="image-gallery">
          <div class="main-image">
            <el-carousel 
              :interval="4000" 
              height="300px"
              indicator-position="outside"
              @change="handleCarouselChange"
              v-if="imageList.length > 0"
            >
              <el-carousel-item v-for="(image, index) in imageList" :key="index">
                <el-image 
                  :src="image" 
                  fit="cover"
                  class="product-image"
                  :preview-src-list="imageList"
                  :initial-index="index"
                />
              </el-carousel-item>
            </el-carousel>
            
            <!-- 当没有图片时显示占位符 -->
            <div v-if="imageList.length === 0" class="no-image-placeholder">
              <i class="el-icon-picture-outline"></i>
              <p>暂无图片</p>
            </div>
          </div>
          
          <!-- 缩略图导航 -->
          <div class="image-thumbnails" v-if="imageList.length > 1">
            <div 
              v-for="(image, index) in imageList" 
              :key="index"
              class="thumbnail-item"
              :class="{ active: currentImageIndex === index }"
              @click="setCurrentImage(index)"
            >
              <el-image 
                :src="image" 
                fit="cover"
                class="thumbnail-image"
              />
            </div>
          </div>
        </div>
        
        <!-- 库存摘要 -->
        <div class="inventory-summary">
          <div class="summary-item">
            <span class="label">总库存</span>
            <span class="value">{{ goodsInfo.num }}</span>
          </div>
          <div class="summary-item">
            <span class="label">库存总金额</span>
            <span class="value">¥{{ totalInventoryValue }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <!-- 价格信息 -->
        <div class="price-section">
                     <div class="price-item">
             <span class="price-label">入库参考价</span>
             <span class="price-value">¥{{ goodsInfo.storageprice }}</span>
           </div>
          <div class="price-item">
            <span class="price-label">出库参考价</span>
            <span class="price-value">¥{{ goodsInfo.retrievalprice }}</span>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">货品类型</span>
              <span class="info-value">{{ goodsInfo.goodstyoeName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">规格型号</span>
              <span class="info-value">{{ goodsInfo.goodsspecifications }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">生产日期</span>
              <span class="info-value">{{ formatDate(goodsInfo.productionTime) }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">单位/条码</span>
              <span class="info-value">
                {{ goodsInfo.goodsUnitName }} ({{ goodsInfo.goodsbarcodes }})
               
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">供应商</span>
              <span class="info-value">{{ goodsInfo.vendorName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户名称</span>
              <span class="info-value">{{ goodsInfo.customerName }}</span>
            </div>
          </div>
        </div>

        <!-- 保质期管理 -->
        <div class="info-section">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">保质期管理</span>
              <span class="info-value status-enabled">开启</span>
            </div>
            <div class="info-item">
              <span class="info-label">保质期</span>
              <span class="info-value">{{ goodsInfo.shelflife }}天</span>
            </div>
            <div class="info-item">
              <span class="info-label">预警天数</span>
              <span class="info-value">{{ goodsInfo.earlywarning }}天</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">状态</span>
              <span class="info-value status-enabled">启用</span>
            </div>
           
            <div class="info-item">
              <span class="info-label">货品状态</span>
              <span class="info-value">{{ getGoodsStatusText(goodsInfo.goodsstatus) }}</span>
            </div>
             <div class="info-item">
              
            </div>
          </div>
        </div>

        <!-- 备注 -->
        <div class="info-section">
          <div class="info-row">
            
            <div class="info-item">
              <span class="info-label">条码批次</span>
              <span class="info-value">{{ goodsInfo.goodsbarcodes || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">货品编码</span>
              <span class="info-value">{{ goodsInfo.goodscoding }}</span>
            </div>
            <div class="info-item">
              
            </div>
          </div>
        </div>

        <!-- 审计信息 -->
        <div class="info-section">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">创建人</span>
              <span class="info-value">{{ goodsInfo.createperson || '未知' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间</span>
              <span class="info-value">{{ formatDateTime(goodsInfo.createtime) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新人</span>
              <span class="info-value">未知</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">更新时间</span>
              <span class="info-value">{{ formatDateTime(goodsInfo.updatetime) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">入库价格</span>
              <span class="info-value">¥{{ goodsInfo.storageprice }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">库存数量</span>
              <span class="info-value">{{ goodsInfo.num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import service from '@/utils/request';

const route = useRoute();

// 货品信息
const goodsInfo = ref({
  goodscoding: '',
  goodsname: '',
  goodsstatus: 1,
  goodstypeid: '',
  goodstyoeName: '',
  productionTime: '',
  goodsspecifications: '',
  goodsUnitId: '',
  goodsUnitName: '',
  goodsbarcodes: '',
  customerid: '',
  customerName: '',
  vendorid: '',
  vendorName: '',
  storageprice: 0,
  retrievalprice: 0,
  num: 0,
  inventoryprice: 0,
  shelflife: 0,
  earlywarning: '',
  createperson: '',
  createtime: '',
  updatetime: '',
  goodaimages: '',
  goodsfile: ''
});

// 图片相关
const imageList = ref<string[]>([]);
const currentImageIndex = ref(0);

// 当前显示的图片（用于缩略图同步）
const currentImage = computed(() => {
  return imageList.value[currentImageIndex.value] || '';
});

// 库存总金额
const totalInventoryValue = computed(() => {
  return (goodsInfo.value.num * goodsInfo.value.storageprice).toFixed(2);
});

// 设置当前图片
const setCurrentImage = (index: number) => {
  currentImageIndex.value = index;
};

// 轮播图切换事件
const handleCarouselChange = (index: number) => {
  currentImageIndex.value = index;
};

// 格式化日期时间
const formatDateTime = (dateTimeStr: string) => {
  if (!dateTimeStr) return '';
  const date = new Date(dateTimeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '-');
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-');
};

// 获取货品状态文本
const getGoodsStatusText = (status: number) => {
  switch (status) {
    case 1:
      return '未入库';
    case 2:
      return '已入库';
    case 3:
      return '已出库';
    default:
      return '未知状态';
  }
};

// 获取货品详情
const getGoodsDetails = async () => {
    debugger
  const goodsId = route.query.id || route.params.id;
  
  if (!goodsId) {
    ElMessage.error('货品ID不能为空');
    return;
  }

  try {
     await service.get('/api/app/standing__Book/get-goods/'+goodsId).then(res=>{
        debugger
         goodsInfo.value =res.data.resultData
          // 处理图片列表
      if (res.data.resultData.goodaimages) {
        const imageUrls = res.data.resultData.goodaimages.split(',').filter(Boolean);
        // 为每个图片URL添加服务器前缀
        imageList.value = imageUrls.map((url: string) => {
          // 如果URL不是以http开头，则添加服务器前缀
          if (!url.startsWith('http')) {
            return `http://localhost:8080${url}`;
          }
          return url;
        });
      }
     })

  } catch (error) {
    console.error('获取货品详情失败:', error);
    ElMessage.error('获取货品详情失败');
  }
};

onMounted(() => {
  getGoodsDetails();
});
</script>

<style scoped>
.goods-details-container {
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  min-height: 100vh;
  padding: 20px;
}

/* 面包屑样式 */
.goods-details-container > div:first-child {
  margin-bottom: 20px;
}

.header-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-name {
  font-size: 26px;
  font-weight: bold;
  color: #303133;
}

.product-id {
  font-size: 16px;
  color: #909399;
  background: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
}

.edit-btn {
  margin-left: auto;
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-panel {
  flex: 1;
  max-width: 500px;
}

.right-panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-gallery {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-image {
  width: 100%;
  height: 300px;
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.no-image-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  color: #909399;
}

.no-image-placeholder i {
  font-size: 48px;
  margin-bottom: 10px;
}

.no-image-placeholder p {
  font-size: 16px;
  margin: 0;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
}

.thumbnail-item {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail-item.active {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播图样式优化 */
:deep(.el-carousel__item) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-carousel__indicators) {
  bottom: -25px;
}

:deep(.el-carousel__indicator) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(220, 223, 230, 0.8);
  margin: 0 6px;
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator.is-active) {
  background: #409eff;
  transform: scale(1.2);
}

:deep(.el-carousel__arrow) {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #606266;
  font-size: 18px;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-carousel__arrow:hover) {
  background-color: #409eff;
  color: white;
}

.inventory-summary {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f5;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item .label {
  color: #606266;
  font-size: 18px;
}

.summary-item .value {
  color: #303133;
  font-weight: bold;
  font-size: 20px;
}

.price-section {
  background: linear-gradient(135deg, #3a90c2, #0acbe9);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.price-item:last-child {
  margin-bottom: 0;
}

.price-label {
  font-size: 18px;
  opacity: 0.9;
}

.price-value {
  font-size: 22px;
  font-weight: bold;
}

.info-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}

.info-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.info-row {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  flex: 1;
  min-width: 0;
}

.info-label {
  color: #606266;
  font-size: 17px;
  min-width: 70px;
  flex-shrink: 0;
}

.info-value {
  color: #303133;
  font-size: 17px;
  text-align: right;
  flex: 1;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-enabled {
  color: #67c23a;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .left-panel {
    max-width: none;
  }
  
  .info-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .info-item {
    width: 100%;
  }
  
  .info-value {
    text-align: left;
  }
}

@media (max-width: 1200px) {
  .info-row {
    gap: 10px;
  }
  
  .info-label {
    min-width: 60px;
    font-size: 16px;
  }
  
  .info-value {
    font-size: 16px;
  }
}
</style>
